import classNames from 'classnames';
import omit from 'lodash.omit';//反向删除属性
import PropTypes from 'prop-types';
import React from 'react';

import {connect} from 'react-redux';
import MediaQuery from 'react-responsive';
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
import tabStyles from 'react-tabs/style/react-tabs.css';
import VM from 'scratch-vm';
import Renderer from 'scratch-render';

import Blocks from '../../containers/blocks.jsx';
import CostumeTab from '../../containers/costume-tab.jsx';
import TargetPane from '../../containers/target-pane.jsx';
import SoundTab from '../../containers/sound-tab.jsx';
import StageWrapper from '../../containers/stage-wrapper.jsx';
import Loader from '../loader/loader.jsx';
import Box from '../box/box.jsx';
import MenuBar from '../menu-bar/menu-bar.jsx';
import CostumeLibrary from '../../containers/costume-library.jsx';
import BackdropLibrary from '../../containers/backdrop-library.jsx';
import ProjectLibrary from '../../containers/project-library.jsx';
import ProjectLibrary_yx from '../../containers/project-library-yx.jsx'; // 优秀作品
import Watermark from '../../containers/watermark.jsx';

import WebGlModal from '../../containers/webgl-modal.jsx';
import Cards from '../../containers/cards.jsx';
import Alerts from '../../containers/alerts.jsx';
import DragLayer from '../../containers/drag-layer.jsx';
import ConnectionModal from '../../containers/connection-modal.jsx';

import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
import {resolveStageSize} from '../../lib/screen-utils';

import styles from './gui.css';
import addExtensionIcon from './icon--extensions.svg';
import codeIcon from './icon--code.svg';
import costumesIcon from './icon--costumes.svg';
import soundsIcon from './icon--sounds.svg';

// Cache this value to only retrieve it once the first time.
// Assume that it doesn't change for a session.
let isRendererSupported = null;

const GUIComponent = props => {
    const {
        activeTabIndex,

        basePath,
        backdropLibraryVisible,
        myProjectLibraryVisible,
        yxProjectLibraryVisible,

        blocksTabVisible,
        cardsVisible,
        canUseCloud,
        children,
        connectionModalVisible,
        costumeLibraryVisible,
        costumesTabVisible,

        isFullScreen,
        loading,
        alertsList,

        onActivateCostumesTab,
        onActivateSoundsTab,
        onActivateTab,
        onExtensionButtonClick,

        onRequestCloseBackdropLibrary,
        onRequestCloseMyProjectLibrary,
        onRequestCloseYxProjectLibrary,


        onRequestCloseCostumeLibrary,

        soundsTabVisible,
        stageSizeMode,
        targetIsStage,

        vm,
        ...componentProps
    } = omit(props, 'dispatch');//反向删除与props/dispatch重复的属性

    if (children) {
        return <Box {...componentProps}>{children}</Box>;
    }

    const tabClassNames = {
        tabs: styles.tabs,
        tab: classNames(tabStyles.reactTabsTab, styles.tab),
        tabList: classNames(tabStyles.reactTabsTabList, styles.tabList),
        tabPanel: classNames(tabStyles.reactTabsTabPanel, styles.tabPanel),
        tabPanelSelected: classNames(tabStyles.reactTabsTabPanelSelected, styles.isSelected),
        tabSelected: classNames(tabStyles.reactTabsTabSelected, styles.isSelected)
    };

    if (isRendererSupported === null) {
        isRendererSupported = Renderer.isSupported();
    }

    return (<MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => {
        const stageSize = resolveStageSize(stageSizeMode, isFullSize);

        return (
            <Box
                className={styles.pageWrapper}
                dir='ltr'
                {...componentProps}
            >
                {/*加载界面???*/}
                {loading ? (<Loader/>) : null}

                {/*是否支持Web GL提示。关于3D渲染的东西*/}
                {isRendererSupported ? null : (<WebGlModal />)}

                {/*教程播放界面*/}
                {cardsVisible ? (<Cards />) : null}


                {/*弹出提示、警告小界面// only display standard and extension alerts here*/}
                <Alerts className={styles.alertsContainer} />

                
                {/*连接硬件时的检测界面*/}
                {connectionModalVisible ? (
                    <ConnectionModal
                        vm={vm}
                    />
                ) : null}
                {/*角色库界面*/}
                {costumeLibraryVisible ? (
                    <CostumeLibrary
                        vm={vm}
                        onRequestClose={onRequestCloseCostumeLibrary}
                    />
                ) : null}
                {/*背景库界面*/}
                {backdropLibraryVisible ? (
                    <BackdropLibrary
                        vm={vm}
                        onRequestClose={onRequestCloseBackdropLibrary}
                    />
                ) : null}

                {/*我的作品库界面*/}
                {myProjectLibraryVisible ? (
                    <ProjectLibrary
                        // vm={vm}
                        onRequestClose={onRequestCloseMyProjectLibrary}
                    />
                ) : null}
                {/*优秀作品库界面*/}
                {yxProjectLibraryVisible ? (
                    <ProjectLibrary_yx
                        // vm={vm}
                        onRequestClose={onRequestCloseYxProjectLibrary}
                    />
                ) : null}

                {/*菜单栏*/}
                <MenuBar className={styles.menuBarPosition} />

                {/*主区域*/}
                <Box className={styles.bodyWrapper}>
                    <Box className={styles.flexWrapper}>
 
                         {/*左侧部分：编程代码*/}
                        <Box className={styles.editorWrapper}>
                            <Tabs
                                forceRenderTabPanel
                                className={tabClassNames.tabs}
                                selectedIndex={activeTabIndex}
                                selectedTabClassName={tabClassNames.tabSelected}
                                selectedTabPanelClassName={tabClassNames.tabPanelSelected}
                                onSelect={onActivateTab}
                            >
                                {/*上部tab头*/}

                                <TabList className={tabClassNames.tabList}>
                                    <Tab className={tabClassNames.tab}>
                                        <img draggable={false} src={codeIcon} />
                                        代码
                                    </Tab>
                                    <Tab
                                        className={tabClassNames.tab}
                                        onClick={onActivateCostumesTab}
                                    >
                                        <img
                                            draggable={false}
                                            src={costumesIcon}
                                        />
                                        {targetIsStage ?"背景": "造型"}
                                    </Tab>
                                    <Tab
                                        className={tabClassNames.tab}
                                        onClick={onActivateSoundsTab}
                                    >
                                        <img draggable={false} src={soundsIcon} />
                                        声音
                                    </Tab>
                                </TabList>

                                {/*积木区*/}
                                <TabPanel className={tabClassNames.tabPanel}>
                                    {/*积木类型选择区*/}
                                    <Box className={styles.blocksWrapper}>
                                        <Blocks
                                            canUseCloud={canUseCloud}
                                            grow={1}
                                            isVisible={blocksTabVisible}
                                            options={{
                                                media: `${basePath}static/blocks-media/`
                                            }}
                                            stageSize={stageSize}
                                            vm={vm}
                                        />
                                    </Box>
                                    {/*具体积木选择区*/}
                                    <Box className={styles.extensionButtonContainer}>
                                        <button
                                            className={styles.extensionButton}
                                            title="添加扩展"
                                            onClick={onExtensionButtonClick}
                                        >
                                            <img
                                                className={styles.extensionButtonIcon}
                                                draggable={false}
                                                src={addExtensionIcon}
                                            />
                                        </button>
                                    </Box>
                                    {/*编程区*/}
                                    <Box className={styles.watermark}>
                                        <Watermark />
                                    </Box>
                                </TabPanel>
                                {/*造型区*/}
                                <TabPanel className={tabClassNames.tabPanel}>
                                    {costumesTabVisible ? <CostumeTab vm={vm} /> : null}
                                </TabPanel>
                                {/*声音区*/}
                                <TabPanel className={tabClassNames.tabPanel}>
                                    {soundsTabVisible ? <SoundTab vm={vm} /> : null}
                                </TabPanel>
                            </Tabs>
                        </Box>
                    
                        {/*右侧部分：舞台*/}
                        <Box className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}>
                            {/*舞台区*/}
                            <StageWrapper
                                isFullScreen={isFullScreen}
                                isRendererSupported={isRendererSupported}
                                stageSize={stageSize}
                                vm={vm}
                            />
                            {/*角色、背景区*/}
                            <Box className={styles.targetWrapper}>
                                <TargetPane
                                    stageSize={stageSize}
                                    vm={vm}
                                />
                            </Box>
                        </Box>

                    </Box>
                </Box>
                <DragLayer />
            </Box>
        );
    }}</MediaQuery>);
};

GUIComponent.propTypes = {
    activeTabIndex: PropTypes.number,
    backdropLibraryVisible: PropTypes.bool,
    myProjectLibraryVisible: PropTypes.bool,
    yxProjectLibraryVisible: PropTypes.bool,

    basePath: PropTypes.string,
    blocksTabVisible: PropTypes.bool,

    canUseCloud: PropTypes.bool,
    cardsVisible: PropTypes.bool,
    children: PropTypes.node,
    costumeLibraryVisible: PropTypes.bool,
    costumesTabVisible: PropTypes.bool,


    isFullScreen: PropTypes.bool,
    loading: PropTypes.bool,

    onActivateCostumesTab: PropTypes.func,
    onActivateSoundsTab: PropTypes.func,
    onActivateTab: PropTypes.func,

    onExtensionButtonClick: PropTypes.func,

    onRequestCloseBackdropLibrary: PropTypes.func,
    onRequestCloseMyProjectLibrary: PropTypes.func,
    onRequestCloseYxProjectLibrary: PropTypes.func,
    onRequestCloseCostumeLibrary: PropTypes.func,
    
    onTabSelect: PropTypes.func,

    soundsTabVisible: PropTypes.bool,
    stageSizeMode: PropTypes.oneOf(Object.keys(STAGE_SIZE_MODES)),
    targetIsStage: PropTypes.bool,

    vm: PropTypes.instanceOf(VM).isRequired,
};
GUIComponent.defaultProps = {
    basePath: './',
    canUseCloud: false,
    loading: false,
    stageSizeMode: STAGE_SIZE_MODES.large
};

const mapStateToProps = state =>({
    // This is the button's mode, as opposed to the actual current state
    stageSizeMode: state.scratchGui.stageSize.stageSize,
    cardsVisible: state.cards.visible,
});


export default connect(
    mapStateToProps
)(GUIComponent);
